<template>
  <view >
	  <!-- <view class="infoView">
	  	<view class="">
	  		{{梧桐街-二七广场}}
	  	</view>
	  </view> -->
    <!-- 路线列表 -->
    <view class="route-list">
      <!-- 循环渲染站点 -->
      <view 
        v-for="(station, index) in stationList" 
        :key="index" 
        class="station-item"
      >
        <!-- 左侧的图标和连接线 -->
        <view class="station-left">
          <!-- 起点图标 -->
          <view v-if="index === 0" class="icon-start">始</view>
          <!-- 终点图标 -->
          <view v-else-if="index === stationList.length - 1" class="icon-end">终</view>
          <!-- 中间站点的图标 -->
          <!-- <view v-else class="icon-mid"></view> -->
		  <image v-else class="icon-mid" src="/static/route/icon-mid.png" mode=""></image>
          <!-- 连接线（最后一个站点不需要） -->
          <view v-if="index !== stationList.length - 1" class="line"></view>
        </view>
        <!-- 右侧的站点文字信息 -->
        <view class="station-info" :class="index === 0||index === stationList.length - 1?'':'station-info1'">
          <text class="station-name">{{ station.station_name }}</text>
          <!-- 只在第一项显示方向 -->
          <!-- <text v-if="index === 0" class="station-direction">{{ station.direction }}</text> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script>
	import {
		lineDetail,
	} from '@/api/index.js'
export default {
  data() {
    return {
		info:{},
      stationList: [
        // { 
        //   name: '紫竹路站',
        //   direction: '哈哈哈哈路方向',
        //   startText: '始',
        //   endText: '终'
        // },
        // { name: '紫竹路站' },
        // { name: '紫竹路站' },
        // { name: '紫竹路站' },
        // { 
        //   name: '宏达路长兴路'
        // }
      ]
    }
  },
  onLoad(e) {
  	this.id=e.id
	this.loadData()
  },
  methods:{
	  loadData() {
	  
	  	var data = {
	  		line_id: this.id
	  	}
	  	lineDetail(data).then(res => {
		
	  		this.info = res.data
	
			this.stationList=this.info.station_list
	
	  	})
	  },
  }
}
</script>

<style scoped>
	.infoView{
		margin: 30rpx;
		padding: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}
.route-container {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  box-sizing: border-box;
}

.route-list {
  /* background-color: #ffffff; */
  border-radius: 10rpx;
  padding: 20rpx 0;
}

.station-item {
  display: flex;
  align-items: flex-start;
  margin-left: 30rpx;
}

.station-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  width: 60rpx;
}

/* 通用图标样式 */
.icon-start,
.icon-end{
width: 48rpx;
height: 48rpx;
background: #157EFE;
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(21,126,254,0.25);
border-radius: 0rpx 0rpx 0rpx 0rpx;
border: 4rpx solid #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
font-weight: bold;
font-size: 24rpx;
color: #FFFFFF;
  flex-shrink: 0;
  z-index: 2;
}

/* 起点图标样式 */
.icon-start {
  background-color: #157EFE;
}

/* 终点图标样式 */
.icon-end {
  background-color: #FF672C;
}

/* 中间站点图标样式 */
.icon-mid {
  /* background-color: #E0E0E0; */
  width: 16rpx;
  height: 16rpx;
}

/* 连接线样式 */
.line {
  width: 16rpx;
  background: #157EFE;
  flex: 1;
  min-height: 70rpx;
  margin: -1px 0;
}

.station-info {
	margin-top: -18rpx;
  display: flex;
  flex-direction: column;
  padding: 10rpx 0;
  min-height: 70rpx;
  justify-content: center;
}
.station-info1{
	margin-top: -30rpx;
}

.station-name {
  font-size: 32rpx;
  color: #333333;
  line-height: 1.5;
}

.station-direction {
  font-size: 26rpx;
  color: #666666;
  margin-top: 5rpx;
}
</style>